![VS CodeとXcodeでFlutterの開発環境を構築してみた](https://devio2023-media.developers.io/wp-content/uploads/2020/02/flutter.png)
VS CodeとXcodeでFlutterの開発環境を構築してみた
こんにちは、CX事業本部IoT事業部の高橋雄大です。
私が所属しているIoT事業部では、度々モバイルアプリの開発を必要とする案件を受けることがあります。その際、部内にはモバイルエンジニアがいないため、他の部署と連携して取り組むことになります。しかし最近では、社内でモバイルエンジニアのリソースが不足しているため、メンバーの確保が難しくなっています。そこで今回、Flutterによるクロスプラットフォーム開発の学習を初めてみようと思いました。
クロスプラットフォーム開発では、他にもReact NativeやCordova、Xamarinなどのフレームワークがありますが、学習コストや将来性(コミュニティの成長)、現在のサポート状況などからFlutterを選択しています。
資料: Googleトレンド
本記事のゴール
VS Codeで編集してXcodeのiOS Simulatorでリアルタイムにプレビューできる開発環境を構築します。
環境情報
項目 | 内容 |
---|---|
OS | macOS Monterey 12.3 (21E230) |
Visual Studio Code | 1.66.0 |
Xcode | 13.3 (13E113) |
Flutter | 2.10.4 |
Dart | 2.16.2 |
Flutter SDKをインストール
Flutter SDKの最新版をこちらからダウンロードします。
任意の場所にダウンロードしたFlutter SDKのZIPファイルを解凍します。
cd ~/ unzip ~/Downloads/flutter_macos_2.10.4-stable.zip
PATHを通します。zshの場合は次のとおりです。
echo 'export PATH="$HOME/flutter/bin:$PATH"' >> ~/.zprofile source ~/.zprofile
PATHが通っていることを確認します。
flutter --version
バージョン情報が出力されればOKです。
Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision c860cba910 (7 days ago) • 2022-03-25 00:23:12 -0500 Engine • revision 57d3bac3dd Tools • Dart 2.16.2 • DevTools 2.9.2
次のコマンドでインストールが必要なツールを確認します。
flutter doctor
全てのツールが導入済みの場合は次のように表示されます。今回は「Flutter」「Xcode」「VS Code」を使います。チェックが入っていない場合は次のステップで導入します。
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 13.3) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.1) [✓] VS Code (version 1.66.0) [✓] Connected device (2 available) [✓] HTTP Host Availability
Xcodeをインストール
Xcodeがインストールされていない場合は、App Storeからダウンロードしてインストールします。Xcodeと一緒にiOS Simulatorもインストールされます。
インストールされたバージョンのXcodeを使用するようにXcodeコマンドラインツールをセットアップします。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
次のコマンドでiOS Simulatorを開きます。
open -a Simulator
シミュレートするデバイスを選択します。
FlutterアプリをiOSデバイスにデプロイして検証する場合は、サードパーティーツールのCocoaPodsをインストールします。今回はこの手順をスキップします。
VS Codeをセットアップ
最新版のVS Codeをこちらからダウンロードしてインストールします。
FlutterプラグインとDartプラグインをインストールして有効化します。
動作確認
サンプルアプリを作成してVS Codeで開きます。
flutter create flutter_sample_app # Flutterアプリを作成 code flutter_sample_app # VS Codeで開く
デバイスを選択してデバッグを実行します。
コードの編集結果がリアルタイムでシミュレーターに反映されます。
まとめ
Flutterで用いられているDartという言語は、JavaScriptの問題点を改善した後継言語のため、JavaScriptやTypeScriptによる開発経験がある人はすぐに使いこなせると思います。私は普段サーバーサイドの開発をしていますが、たまにフロントエンドの開発でReactやAngularも触っていたため、Flutterアプリの開発にもスムーズに移行することが出来ました。
国内外でFlutterを用いた開発の需要が高まってきているので、今後も継続して学習を続けていこうと思います。